<template>
  <div class="myHome">
    <div class="container">
      <div class="userContainer" v-if="showUserInfo">
        <div class="avatarImg">
            <img :src="profile.avatarUrl" :alt="profile.nickname">
        </div>
        <div class="userInfo">
          <div class="header">
            <span class="nickname">{{profile.nickname}}</span>
            <span v-if="profile.vipType">VIP{{profile.vipType}}</span>
            <span class="lv">Lv.{{userInfo.level}}</span>
            <span>{{gender}}</span>
            <button class="logout" @click="handleClickLogout">退出登录</button>
          </div>
          <ul class="userState">
            <li>
              <p>{{profile.eventCount}}</p>
              <p>动态</p>
            </li>
            <li>
              <p>{{profile.follows}}</p>
              <p>关注</p>
            </li>
            <li>
              <p>{{profile.followeds}}</p>
              <p>粉丝</p>
            </li>
          </ul>
          <div class="listenCount">
            <p>累计听歌数量: {{userInfo.listenSongs}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyHome',
  data () {
    return {
      userInfo: {},
      showUserInfo: false
    }
  },
  computed: {
    gender () {
      return this.userInfo.profile.gender === 1 ? '男' : '女'
    },
    profile () {
      return this.userInfo.profile
    }
  },
  methods: {
    async getUserInfo () {
      // 先判断store中是否有数据，如果没有就发送请求
      let userId = this.$store.state.userInfo.userId
      if (!userId) {
        const LoginStatus = await this.$http.get(`/login/status?timerstamp=${Date.now()}`, { withCredentials: true })
        userId = LoginStatus.data.data.profile.userId
        console.log('发送请求')
      }
      const res = await this.$http.get(`/user/detail?uid=${userId}`)
      this.userInfo = res.data
      this.showUserInfo = true
    },
    async handleClickLogout () {
      const res = await this.$http.get('/logout')
      // this.$router.redirect('/')
      window.location.href = '/'
      // 清空cookies
      console.log(res)
    }
  },
  created () {
    this.getUserInfo()
  }
}
</script>

<style lang="less" scoped>
.myHome{
  margin-top: 5px;
}
.container{
  width: 1100px;
  margin: 0 auto;
  background-color: #ffffff;
}

.userContainer{
  padding: 30px;
  width: 100%;
  overflow: hidden;
  .avatarImg{
    width: 20%;
    float: left;
    border: 1px solid #d5d5d5;
    padding: 5px;
    margin-right: 40px;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .userInfo{
    width: 70%;
    float: left;
    // margin-left: 40px;
    box-sizing: border-box;
    .header{
      overflow: hidden;
      font-size: 18px;
      padding: 5px;
      border-bottom: 1px solid #dddddd;
      .nickname{
        font-size: 24px;
        font-weight: 600;
      }
      .lv{
        color: #e03a24;
        font-style: italic;
        border: 2px solid #e03a24;
        padding: 0 11px 0 8px;
        border-radius: 15px;
        font-weight: 600;
      }
      span{
        margin: 0 10px;
      }
      .logout{
        float: right;
        background-color: rgba(255, 0, 0, 0.8);
        border-radius: 5px;
        color: white;
        border: 1px solid #ddd;
        padding: 10px 20px;
        cursor: pointer;
      }
      .logout:hover{
        background-color: red;
      }
    }
    .userState{
      width: 100%;
      padding: 10px 0;
      li{
        float: left;
        text-align: center;
        padding: 5px 30px;
        color: #69696b;
        &:not(:last-child){
          border-right: 1px solid #ddd;
        }
        p{
          font-size: 20px;
        }
      }
    }
    .listenCount{
      clear: both;
      padding: 20px 30px;
      color: #69696b;
      font-size: 18px;
    }
  }

}
</style>
